Dynamic Menu

Dynamic Menu


You are currently viewing a sandbox preview version of Spring ’19 | Go back to Winter ’19

The Dynamic Menu can be used to give a user a variable number of actions to take. When that list of actions is long, a search mechanism is provided.

BaseDesktop OnlyRequires ui:scrollerWrapper


About Dynamic Menu

The Dynamic Menu is a modified concept of the Menu component, used when the number of actions available to the user is dynamic or variable. It can also be useful when the number of actions in the menu is large enough that a search functionality would be required.

The component is composed of a Popover, coupled with either a listbox of options or an always expanded Autocomplete Combobox and a list of additional actions pinned to the bottom of the dialog. The Popover and pinned actions are constant through the 3 different states the Dynamic Menu can take.

When there are no actions other than the pinned actions, static content is displayed in the body of the Popover informing the user of the empty state. When there are 10 or less options in the menu a listbox is used to display them in the body of the Popover. When there are more than 10 options an Autocomplete Combobox is used to display some options and allow searching through the rest of avialble options that may not be displayed.

Both the listbox and Combobox versions come with Up and Down arrow key navigation through the list. The listbox variant should only have a single focusable option. The Combobox variant should follow the expected keyboard behavior listed on the Combobox Component page.

Overview of CSS Classes


Headers styles for dynamic menu

Restrict.slds-dynamic-menu h3